$(function() {
    function init() {
        var i = 0;
        var s = 0;
        var lis = $(".banner ul li");
        var points = $(".points ol li");
        var width = lis.width();
        var timer = null;

        function autoPlay() {
            i++;
            s++;
            if (i > lis.length - 1) {
                i = 1;
                $(".banner ul").css("marginLeft", 0);
            }

            s = s > points.length - 1 ? 0 : s;
            $(".banner ul").stop().animate({
                marginLeft: -(i * width)
            }, 1000);
            points.eq(s).addClass("active").siblings().removeClass("active");
        }

        timer = setInterval(function() {
            autoPlay();
        }, 2500)

        points.on("click", function() {
            i = $(this).index();
            s = $(this).index();
            points.eq(s).addClass("active").siblings().removeClass("active");
            $(".banner ul").stop().animate({
                marginLeft: -(i * width)
            }, 1000);


        });

        $(".banner").hover(function() {
            clearInterval(timer);

        }, function() {
            if (timer) clearInterval(timer);
            timer = setInterval(function() {
                autoPlay();
            }, 2500)

        })
    }
    init();
})